<template>
    <div>
        <product-detail :product="product"></product-detail>
    </div>
</template>

<script>
import ProductDetailVue from '../components/products/ProductDetail.vue'
export default {
    // 在该组件刚被创建时判断当前本地中是否有该商品，如果没有则通过this.$store.dispatch的方式将包含当前商品id的对象作为载荷分发到类型为productById的action中，在action中进行异步操作从后端获取指定商品，然后提交到对应的mutation中进行本地状态修改，这已经使我们习惯的思路了。
    created() {
        const { name } = this.product
        if (!name) {
            this.$store.dispatch('productById', {
                productId: this.$route.params['id']
            })
        }
    },
    computed: {
        product() {
            return this.$store.getters.productById(this.$route.params['id'])
        }
    },
    components: {
        'product-detail': ProductDetailVue
    }
}
</script>
